<template>
	<view class="">
		<view class="bgImage tn-flex">
			<view class="tn-flex-basic-full" style="height: 100%;">
				<view class="bgCard" style="display: flex;justify-content: space-between;overflow: hidden;">
					<view class="" style="width:27%;"></view>
					<view class="" style="width:73%;">
						<scroll-view scroll-x direction="horizontal" style="height: 100%;">
							<view class="tui-goods__list">
								<view class="tui-goods__item" v-for="(item, index) in menuList" :key="index"  @click="productDetail(item)">
									<view class="tui-goods__imgbox">
										<image :src="info.app.cdnurl+item.image" mode="widthFix"
											class="tui-goods__img"></image>
									</view>
									<view class="tui-pri__box">
										<view class="tui-sale-pri">
											<view class="tui-size-sm">¥</view>
											<view v-if="item.price && item.price[0]">{{item.price[0]}}</view>
											<!-- <view class="tui-size-sm">.50</view> -->
										</view>
									</view>
									<view class="tui-original__pri">{{item.original_price}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
	
			<tn-grid align="left" :col="col" v-show="show">
				<block v-for="(item, index) in menuList" :key="index">
					<!-- H5 -->
					<!-- #ifndef MP-WEIXIN -->
					<tn-grid-item style="margin-top: 20rpx;" @click="currentClick(index)">
						<view v-if="current==index" class="activeBlock">{{ item.title }}</view>
						<view v-else class="inactiveBlock">
							{{ item.title }}
						</view>
					</tn-grid-item>
					<!-- #endif-->

					<!-- 微信小程序 -->
					<!-- #ifdef MP-WEIXIN -->
					<tn-grid-item :style="{width: gridItemWidth}" style="margin-top: 20rpx;"
						@click="currentClick(index)">
						<view v-if="current==index" class="activeBlock">{{ item.title }}</view>
						<view v-else class="inactiveBlock">
							{{ item.title }}
						</view>
					</tn-grid-item>
					<!-- #endif-->
				</block>
			</tn-grid>
			<view class="">
				<view class="" style="display: flex;padding: 10rpx 15rpx;" v-for="(item,index) in menuList" :key="index" @click="productDetail(item)">
					<view class="">
						<image
							:src="info.app.cdnurl+item.image"
							mode="widthFix" style="width: 264rpx;height: 264rpx;border-radius: 20rpx;"
							class="cardImage"></image>
					</view>
					<view class="tn-padding-left-sm tn-padding-right-sm" style="position: relative;">
						<view class="tn-text-md">{{item.title}}</view>
						<view class="" style="display: flex;margin-top: 20rpx;">
							<tn-tag backgroundColor="rgb(255 7 119 / 8%)" fontColor="#ff0777" size="sm" padding="0 5rpx"
								width="auto" style="margin-right:20rpx;">{{item.subtitle}}</tn-tag>
							<!-- <tn-tag backgroundColor="rgb(255 7 119 / 8%)" fontColor="#ff0777" size="sm" padding="0 5rpx"
								width="auto">超值特卖</tn-tag> -->
						</view>
						<view class="bottom-card" style="position: absolute;bottom: 15rpx;">
							<view class="tn-text-xs" style="height: 100%;position: relative;">
								<text class="" style="display: flex;position: absolute;left: 90rpx;top: 7rpx;">
									<text class="" style="color: #ff0777;">¥</text>
									<text class="" style="color: #ff0777;font-size: 34rpx;font-weight: bold;" v-if="item.price && item.price[0]">{{item.price[0]}}</text>
								</text>
								<text class="" style="display: flex;position: absolute;left: 90rpx;top: 46rpx;">
									<text class=""
										style="color: #989898;font-size: 24rpx;text-decoration-line: line-through;">¥{{ item.original_price }}</text>
								</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsIds
	} from "@/apis"
	export default {
		data() {
			return {
				swiperList: [{
					src: 'https://oss.taoding1688.com/static/uniapp/static/images/news/3.jpg',
					type: 'image'
				}],
				list: [],
				current: 0,
				col: 3,
				menuList: [],
				show: false,
			}
		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		},
		async onLoad(option) {
			let res = await getGoodsIds(option.ids)
			this.menuList = res.data
		},
		methods: {
			up() {
				this.show = false
			},
			down() {
				this.show = true
			},
			change(index) {
				this.current = index
			},
			currentClick(index) {
				this.current = index
			},
			productDetail(item) {
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-flex-basic-xs {
		flex-basis: 20%;
	}

	.tn-flex-basic-sm {
		flex-basis: 40%;
	}

	.tn-flex-basic-md {
		flex-basis: 50%;
	}

	.tn-flex-basic-lg {
		flex-basis: 60%;
	}

	.tn-flex-basic-xl {
		flex-basis: 80%;
	}

	.tn-flex-basic-full {
		flex-basis: 100%;
		margin: 20rpx 20rpx 100rpx 20rpx;
		overflow: hidden;
	}

	.bgImage {
		background-image: url('https://oss.taoding1688.com/static/uniapp/static/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 320rpx;

	}

	.bgCard {
		background-image: url('https://oss.taoding1688.com/static/uniapp/static/cd.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 245rpx;
		border-radius: 20rpx;
	}

	.tui-goods__imgbox {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.tui-goods__img {
		max-width: 150rpx;
		max-height: 150rpx;
		display: block;
	}

	.tui-original__pri {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999999;
		transform-origin: center 10%;
		transform: scale(0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: line-through;
	}

	.tui-size-sm {
		font-size: 24rpx;
		line-height: 24rpx;
		transform: scale(0.8);
		transform-origin: 0 50%;
	}

	.tui-sale-pri {
		display: flex;
		align-items: flex-end;
		padding: 10rpx 0 8rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #eb0909;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		// background-image: url('../../static/cv.png');
		// background-size: 100% 100%;
		// width: 100%;
		// height: 30rpx;
	}

	.tui-goods__list {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.tui-goods__item {
		background-color: #fff;
		width: 140rpx;
		height: 230rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		margin-right: 18rpx;
	}

	.tui-pri__box {
		max-width: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.card {
		border-radius: 30rpx;
		background: #fff;
		margin-top: -35rpx;
	}

	.cardImage::after {
		background: rgba(0, 0, 0, .02);
	}

	.bottom-card {
		background-image: url('https://h2.appsimg.com/b.appsimg.com/upload/mst/2024/07/12/107/5eef8faabdc48f95a87b0aaf13ceed58.png!75.webp');
		height: 80rpx;
		width: 420rpx;
		background-size: 100% 100%;
	}



	.activeBlock {
		padding: 10rpx 25rpx;
		background: rgb(240, 56, 103);
		border: 1rpx solid rgb(240, 56, 103);
		color: #fff;
		width: 200rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 30rpx;
	}

	.inactiveBlock {
		padding: 10rpx 25rpx;
		background: #fff;
		border: 1rpx solid rgb(0, 0, 0);
		color: rgb(0, 0, 0);
		width: 200rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 30rpx;
	}
</style>